<template>
  <!-- 立即使用按钮
          当滚轮到底部的距离为0时使用enterStyle[0]样式
          否则使用enterStyle[1]样式
          屏幕宽度screenWidth小于1009时修改样式
       -->
  <div
    :class="$store.state.scrollTop == 0 ? enterStyle[0] : enterStyle[1]"
    :style="
      $store.state.screenWidth < 1009 &&
      'position: absolute; left: 50%; transform: translateX(-50%);background-color: #0182c7; color: #fff;'
    "
    @click="showLogin"
  >
    <span>立即使用</span>
  </div>
</template>

<script>
export default {
  name: "UseNow",
  data() {
    return {
      // 两种立即进入风格
      enterStyle: ["enter", "enter1"],
    };
  },
  methods:{
    showLogin(){
      // 显示登录组件
      this.$store.commit("setIsShowLogin",true);
    }
  }
};
</script>

<style lang="less" scoped>
// 第一种立即进入按钮
.enter {
  // 宽高
  width: 100px;
  height: 35px;
  // 字体大小
  font-size: 16px;
  // 背景颜色
  background-color: #fff;
  // 字体颜色
  color: #0182c7;
  // 小手
  cursor: pointer;
  // 圆角
  border-radius: 13px;
  // 字体居中
  text-align: center;
  // 行高
  line-height: 35px;
  // 字间距
  letter-spacing: 1px;
}
// 鼠标移入时
.enter:hover {
  // 阴影
  box-shadow: 0 0 10px #0182c7;
}
// 第二种立即进入按钮
.enter1 {
  // 宽高
  width: 100px;
  height: 35px;
  // 字体大小
  font-size: 16px;
  // 背景颜色
  background-color: #0182c7;
  // 字体颜色
  color: #fff;
  // 小手
  cursor: pointer;
  // 圆角
  border-radius: 13px;
  // 字体居中
  text-align: center;
  // 行高
  line-height: 35px;
  // 字间距
  letter-spacing: 1px;
}
// 鼠标移入时
.enter1:hover {
  // 阴影
  box-shadow: 0 0 10px #0182c7;
}
/*在浏览器视口宽小于375px时生效*/
@media (max-width: 375px) {
  // 立即进入按钮
  .enter {
    // 宽高
    width: 80px;
    height: 25px;
    // 行高
    line-height: 25px;
    // 字体大小
    font-size: 12px;
  }
}
</style>